<template>
  <div class="img-list page">
    <cube-scroll :items="items">
        <div class="items">
          <div class="item" @click="showImagePreview(index)" v-for="(item) in items" :key="item.id">
            <img :src="imgUrl(item.imgOrder.img)" alt="" class="img">
            <div class="info">
<!--              <span class="name">{{item.user.name}} 积分:{{item.imgOrder.point}} 兑费:{{item.imgOrder.money}}</span>-->
              <span class="name">{{item.user.name}} 积分:{{item.imgOrder.point}}</span>
              <span class="mobile">{{item.imgOrder.mobile?item.imgOrder.mobile:'未提交手机号'}}</span>
              <span class="mobile">{{item.user.shopName}} 总价:{{item.imgOrder.price}}元</span>
              <span class="mobile" v-if="item.imgOrder.status!=2">{{item.imgOrder.remark}}</span>
              <span class="mobile" v-else>{{item.imgOrder.info}}</span>
            </div>
            <span class="status" @click.stop="check(item.imgOrder)">{{statusEnum[item.imgOrder.status]}}</span>
            <span class="date">{{parseTime(item.imgOrder.date)}}</span>
          </div>
        </div>
    </cube-scroll>
  </div>
</template>

<script>
// import { list, pass, refuse } from '../../api/order'
import { list } from '../../api/order'
import { QI_NIU_URL } from '../../app.config'
import { parseTime } from '../../util/time'
// import { showConfirm, showCorrect } from '@/dialog'

export default {
  created () {
    this.self = this.$route.query.self
    list(this.self).then(res => {
      this.items = res.data
      console.log(this.items)
    })
  },
  computed: {
    imgList () {
      const imgs = []
      this.items.forEach(item => {
        console.log(item)
        imgs.push(this.imgUrl(item.imgOrder.img))
      })
      return imgs
    }
  },
  methods: {
    check (item) {
      // 管理员审核
      // if (item.status || this.self) {
      //   return
      // }
      // showConfirm('考核', '确定通过,取消拒绝').then(res => {
      //   if (res) {
      //     pass(item.id).then(res => {
      //       showCorrect('审核通过')
      //       this.$set(item, 'status', 1)
      //     })
      //   } else {
      //     refuse(item.id).then(res => {
      //       showCorrect('审核拒绝')
      //       // item = res.data
      //       this.$set(item, 'status', 2)
      //     })
      //   }
      // })
    },
    turnDetail (id) {
      const path = '/order/img'
      this.$router.push({ path: path, query: { id } })
    },
    showImagePreview (index) {
      this.$createImagePreview({
        imgs: this.imgList,
        initialIndex: index
      }).show()
    },
    parseTime (time) {
      return parseTime(time)
    },
    imgUrl (url) {
      return QI_NIU_URL + url
    }
  },
  data () {
    return {
      items: [],
      self: null,
      statusEnum: ['待审核', '通过', '未通过']
    }
  }
}
</script>

<style scoped lang="stylus">
  .img-list
    padding 0 0
    .items
      padding 10px 10px
      .item
        position relative
        height: 85px;
        padding 10px 0
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 7px 0px rgba(122, 122, 122, 0.52);
        border-radius: 10px;
        margin-top 8px
        display flex
        align-items center
        .img
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin 0 12px
        .info
          display flex
          align-items flex-start
          justify-content center
          flex-direction column
          flex 1
          .name
            font-size: 14px;
            color: rgba(85, 84, 93, 1);
          .mobile
            font-size: 11px;
            color: rgba(185, 183, 192, 1);
            margin-top 11px
        .status
          margin-right 20px
          width:59px;
          height:25px;
          background:rgba(89,142,254,1);
          box-shadow:0px 3px 7px 0px rgba(89,142,254,0.52);
          border-radius:9px;
          display flex
          align-items center
          justify-content center
          font-size:11px;
          color:rgba(255,255,255,1)
        .date
          position absolute
          right 10px
          top 10px
          font-size 11px
          color #BFBDC5
</style>
